<template>
	<el-dialog ref="formRef" :visible.sync="visible" :title="title" width="900px" v-if="title=='设置折扣'" :before-close="close">
		<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
			<el-row type="flex" :gutter="10">
				<!-- <el-col :span="24">
					<el-form-item label="轮播图" prop="picarr">
					    <elUploadImage v-model="form.picarr" :limit="9"></elUploadImage>
					</el-form-item>
				</el-col> -->
				<!-- <el-col :span="12">
					<el-form-item label="商家名称" prop="merch_name">
						<el-input v-model="form.merch_name" placeholder="请输入商家名称" style="width: 240px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="!editInfo?.cate_id">
					<el-form-item label="登录账号" prop="username">
						<el-input v-model="form.username" placeholder="请输入登录账号" style="width:240px"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="!editInfo?.cate_id">
					<el-form-item label="登录密码" prop="password">
						<el-input v-model="form.password" placeholder="请输入登录密码" style="width:240px"></el-input>
					</el-form-item>
				</el-col> -->
				<!-- 开通角色 1普通会员 2收单商户 -->
				<!-- <el-col :span="12">
					
					<el-form-item label="开通角色" prop="open_part">
						<el-radio-group v-model="form.open_part">
							<el-radio :label="1">普通会员</el-radio>
							<el-radio :label="2">收单商户</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
				<!-- 会员类型 2个人会员 3企业会员 4个人工商户 -->
				<!-- <el-col :span="12">
					
					<el-form-item label="会员类型" prop="member_type">
						<el-select v-model="form.member_type" size="small" placeholder="请选择会员类型"
							@change="changemember_type" style="width: 240px;margin-right: 10px;">
							<el-option v-for="(item,index) in member_typelist" :key="index" :label="item.title"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
				<!-- // is_supermarket  0否 1是 -->
				<!-- <el-col :span="12">
					<el-form-item label="是否超市" prop="is_supermarket">
						<el-radio-group v-model="form.is_supermarket">
							<el-radio :label="0">否</el-radio>
							<el-radio :label="1">是</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="form.is_supermarket == 1">
					<el-form-item label="超市品牌" prop="supermarket_brand">
						<el-select v-model="form.supermarket_brand">
							<el-option :label="item" :value="index"
								v-for="(item,index) in $store.getters.supermarket_brand_list"
								:key="`s_brand_${item}`"></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
				<!--  is_takeaway 是否开启外卖  0否 1是 -->
				<!-- <el-col :span="12">
					<el-form-item label="是否开启外卖" prop="is_takeaway">
						<el-radio-group v-model="form.is_takeaway">
							<el-radio :label="0">否</el-radio>
							<el-radio :label="1">是</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
				<!-- // is_park 是否停车场 0否 1是 -->
				<!-- <el-col :span="12">
					<el-form-item label="是否停车场" prop="is_park">
						<el-radio-group v-model="form.is_park">
							<el-radio :label="0">否</el-radio>
							<el-radio :label="1">是</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
				<!-- 外卖配送费shipping_fee -->
				<!-- <el-col :span="12" v-if="form.is_takeaway==1">
					<el-form-item label="外卖配送费" prop="shipping_fee">
						<el-input v-model="form.shipping_fee" placeholder="请输入外卖配送费" style="width: 240px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="form.member_type!==2">
					<el-form-item label="营业执照注册号" prop="license_no">
						<el-input v-model="form.license_no" placeholder="请输入营业执照注册号" style="width: 240px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系人" prop="merch_link_man">
						<el-input v-model="form.merch_link_man" placeholder="请输入联系人" style="width: 240px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="手机号" prop="mobile">
						<el-input v-model.number="form.mobile" placeholder="请输入手机号" style="width: 240px;"></el-input>
					</el-form-item>
				</el-col> -->
				<el-col :span="12">
					<el-form-item label="折扣比例" prop="discount_rate">
						<el-input v-model="form.discount_rate" type="number" placeholder="请输入分账比例"
							style="width: 240px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="平台承担比例" prop="platform_rate">
						<el-input v-model="form.platform_rate" type="number" placeholder="请输入平台承担比例"
							style="width: 240px;"></el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="商家标签" prop="tags">
						<el-input v-model="form.tags" placeholder="请输入商家标签,用空格分割" style="width: 240px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属类别" prop="cate_id">
						<el-cascader style="width: 240px;" v-model="form.cate_id" :options="catelist" :props="{
						    value:'id',
						    label:'name',
							emitPath:false
						}"></el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属区域" prop="province_id">
						<addressSelect style="width: 240px;" v-model="area" @input="input"></addressSelect>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属楼层" prop="floor">
						<el-select v-model="form.floor" size="small" placeholder="请选择所属楼层"
							style="width: 240px;margin-right: 10px;">
							<el-option v-for="(item,index) in floorlist" :key="index" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="门牌号" prop="house_num">
						<el-input v-model="form.house_num" placeholder="请输入门牌号" style="width:240px"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="详细地址" prop="address">
						<el-input v-model="form.address"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="销量" prop="sales_num">
						<el-input-number v-model="form.sales_num" :step="1" :precision="0"
							style="width:260px"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="粉丝数" prop="fans_num">
						<el-input-number v-model="form.fans_num" :step="1" :precision="0"
							style="width:260px"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="营业时间" prop="opening_time">
						<el-time-picker is-range v-model="form.opening_time" value-format="HH:mm:ss" range-separator="至"
							start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
						</el-time-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input v-model="form.sort"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio :label="index" v-for="(item, index) in $store.getters.status"
								:key="`status-${index}`">{{
					            item }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="地图" prop="location">
						<maps :location.sync="form.location"></maps>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="展示图" prop="merch_picarr">
						<elUploadImage v-model="form.merch_picarr" :limit="9"></elUploadImage>
						<p style="font-size: 12px;color:gray">第一张为Logo</p>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="营业执照" prop="license_img">
						<elUploadImage v-model="form.license_img" :limit="1"></elUploadImage>
					</el-form-item>
				</el-col> -->
				<el-col :span="24">
					<el-form-item>
						<el-button type="primary" @click="submit">提交</el-button>
						<el-button @click="close">取消</el-button>
					</el-form-item>
				</el-col>

			</el-row>
		</el-form>
	</el-dialog>
</template>
<script>
	import elUploadImage from '@/components/el-upload-image.vue'
	import addressSelect from '@/components/addressnew.vue'
	import storeCateSelect from '@/components/merchant-cate-select.vue'
	import {
		get,
		post
	} from '@/assets/js/http.js'
	export default {
		components: {
			elUploadImage,
			addressSelect,
			storeCateSelect,
			"maps": () => import("@/components/map/index.vue"),
		},
		props: {
			editInfo: {
				type: Object,
				default () {
					return null
				}
			},
			title: {
				type: String,
				default: ''
			},
			floorlist: {
				type: Array,
				default: []
			},
			id: {
				type: Number,
				default: 0
			}
		},
		data() {
			var checkAge = (rule, value, callback) => {
				console.log(value, 'value')
				if (value == '') {
					return callback(new Error('分账比例不能为空'));
				}
				setTimeout(() => {
					if ( value<=0 || value >1) {
						callback(new Error('必须大于0或小于等于1'));
					} else {
						callback();
					}
				}, 1000);
			};
			var checkrate = (rule, value, callback) => {
				console.log(value, 'value')
				if (value == '') {
					return callback(new Error('分账比例不能为空'));
				}
				setTimeout(() => {
					if ( value < 0|| value > 1) {
						callback(new Error('必须大于等于0或小于等于1'));
					} else {
						callback();
					}
				}, 1000);
			};
			return {
				visible: false,
				area: [],
				catelist: [],
				member_typelist: [{
					id: 2,
					title: '个人会员'
				}, {
					id: 3,
					title: '企业会员'
				}, {
					id: 4,
					title: '个人工商户'
				}], //2个人会员 3企业会员 4个人工商户
				form: {
					// address: '', //详细地址
					// cate_id: '', //所属类别
					// city_id: '',
					discount_rate: '', //佣金比例  
					platform_rate:'',
					// merch_link_man: '', //联系人
					// license_no: '', //营业执照号
					// merch_picarr: [], //展示图
					// picarr: [], //轮播图
					// mobile: '', //手机号
					// province_id: '',
					// merch_name: '', //商家名称
					// street_id: '',
					// town_id: '',
					// sales_num: '',
					// fans_num: '',
					// opening_time: '',
					// sort:'',
					// tags: '',
					// status: '1',
					// username: '', //登录账号
					// password: '', //登录密码
					// floor: '',
					// house_num: '',
					// member_type: '',
					// open_part: '',
					// address_detail: '',
					// is_takeaway: null,
					// is_supermarket: null,
					// is_park: null,
					// license_img: [],
					// supermarket_brand: ''
				},
				rules: {
					// merch_picarr: [{
					// 	required: true,
					// 	message: '请上传展示图'
					// }],
					// picarr: [{
					// 	required: true,
					// 	message: '请上传轮播图'
					// }],
					// username: [{
					// 	required: true,
					// 	message: '请输入登录账号',
					// 	trigger: 'blur'
					// }],
					// password: [{
					// 	required: true,
					// 	message: '请输入密码',
					// 	trigger: 'blur'
					// }],
					// floor: [{ required: true, message: '请输入所属楼层', trigger: 'blur' }],
					// house_num: [{ required: true, message: '请输入门牌号', trigger: 'blur' }],
					// cate_id: [{
					// 	required: true,
					// 	message: '请选择所属类别',
					// 	trigger: 'blur'
					// }],
					// open_part: [{
					// 	required: true,
					// 	message: '请选择开通角色',
					// 	trigger: 'blur'
					// }],
					// member_type: [{
					// 	required: true,
					// 	message: '请选择会员类型',
					// 	trigger: 'blur'
					// }],
					// merch_name: [{
					// 	required: true,
					// 	message: '请输入商家名称',
					// 	trigger: 'blur'
					// }],
					// province_id: [{
					// 	required: true,
					// 	message: '请选择所属区域',
					// 	trigger: 'blur'
					// }],
					// city_id: [{
					// 	required: true,
					// 	message: '请选择所属区域',
					// 	trigger: 'change'
					// }],
					// town_id: [{
					// 	required: true,
					// 	message: '请选择所属区域',
					// 	trigger: 'change'
					// }],
					discount_rate: [{
						validator: checkAge,
						trigger: 'blur'
					}],
					platform_rate: [{
						validator: checkrate,
						trigger: 'blur'
					}],
					// mobile: [{
					// 		required: true,
					// 		message: "此项为必填项"
					// 	},
					// 	{
					// 		pattern: /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/,
					// 		message: "手机号码格式错误"
					// 	}
					// ],
					// merch_link_man: [{
					// 	required: true,
					// 	message: '请输入联系人',
					// 	trigger: 'blur'
					// }],
					// address: [{
					// 	required: true,
					// 	message: '请输入详细地址',
					// 	trigger: 'blur'
					// }],
					// sales_num: [{
					// 	required: true,
					// 	message: '请输入销量',
					// 	trigger: 'blur'
					// }],
					// fans_num: [{
					// 	required: true,
					// 	message: '请输入粉丝数',
					// 	trigger: 'blur'
					// }],
					// opening_time: [{
					// 	required: true,
					// 	message: '请选择营业时间',
					// 	trigger: 'blur'
					// }],
					// sort:[{
					// 	required: true,
					// 	message: '请输入排序',
					// 	trigger: 'blur'
					// }],
					// tags: [{
					// 	required: true,
					// 	message: '请输入商家标签',
					// 	trigger: 'blur'
					// }],
					// is_takeaway: [{
					// 	required: true,
					// 	message: '请选择',
					// 	trigger: 'blur'
					// }],
					// location: [{
					// 	required: true,
					// 	message: '请输入',
					// 	trigger: 'change'
					// }, ],
					// is_supermarket: [{
					// 	required: true,
					// 	message: '请选择',
					// 	trigger: 'blur'
					// }],
					// is_park: [{
					// 	required: true,
					// 	message: '请选择',
					// 	trigger: 'blur'
					// }],
					// supermarket_brand: [{
					// 	required: true,
					// 	message: '请选择',
					// 	trigger: 'blur'
					// }],
				}
			}
		},
		watch: {
			area() {
				this.form.province_id = this.area[0]
				this.form.city_id = this.area[1]
				this.form.town_id = this.area[2]
				if (this.area[3]) {
					this.form.street_id = this.area[3] ? this.area[3] : 0
				}
			},
			editInfo() {
				if (this.editInfo) {
					this.form = JSON.parse(JSON.stringify(this.editInfo))
					this.area = [Number(this.form.province_id) || 0, Number(this.form.city_id) || 0, Number(this.form
						.town_id) || 0]
					console.log(this.area, this.form.province_id)
					this.form.opening_time = this.editInfo.opening_time.split('至')
					if (this.form.merch_picarr) {
						this.form.merch_picarr = this.form.merch_picarr.split(',').map(item => {
							return {
								url: item,
								name: Date.now() + Math.random().toFixed(3) * 1000
							}
						})
					}

					// if(this.from.picarr){
					// 	this.from.picarr = this.form.picarr.split(',').map(item => {
					// 	    return {
					// 	        url: item,
					// 	        name: Date.now()+Math.random().toFixed(3)*1000
					// 	    }
					// 	})
					// }
					if (this.form.license_img) {
						if (this.form.license_img.length > 0) {
							this.form.license_img = [{
								url: this.form.license_img,
								name: Date.now()
							}]
						}
					}
					console.log(this.form.license_img, 'license_img')
					this.open()
				}
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				let data = await post({
					url: '/admin/store.MerchantCate/index',
					data: {
						page: 1,
						limit: 999
					}
				})
				this.catelist = data.list
			},
			// 关闭弹窗
			close() {
				this.form = this.$options.data().form
				this.visible = false
				this.$emit('update:editInfo', null)
			},
			// 打开弹窗
			open() {
				this.visible = true
			},
			// 提交
			submit() {
				this.$refs.formRef.validate(async (valid) => {
					if (valid) {
						// if (this.form.member_type !== 2 && !this.form.license_no) {
						// 	this.$message('请输入营业执照注册号')
						// 	return
						// }
						// if (this.form.member_type !== 2 && !this.form.license_img) {
						// 	this.$message('请上传营业执照')
						// 	return
						// }
						// this.form.tags = this.form.tags.split(' ')
						// this.form.tags = this.form.tags.join(',')
						// this.form.cate_id = this.form.cate_id
						// this.form.address_detail = this.form.address_detail + this.form.address

						// console.log(this.form.cate_id, 'this.form.tags', this.form.address_detail, this.form
						// 	.license_img)
						// this.form.latitude = this.form.location.lat
						// this.form.longitude = this.form.location.lng
						console.log(this.form,'this.form',this.id)
						// return
						this.$loading()
						try {
							await post({
								url: '/admin/store.merchant/setMerchDiscount',
								data: {
									...this.form,
									id:this.id,
									// merch_picarr: this.form.merch_picarr.map(item => item.url).join(
									// 	','),
									// license_img: this.form.license_img ? this.form.license_img.map(
									// 	item => item.url).join(',') : '',
									// picarr: this.form.picarr.map(item => item.url).join(','),
									// opening_time: this.form.opening_time.join('至')
								},
								successTip: true,
							}).then(res => {
								// if (this.title == '添加商家') {
								// 	console.log(res.data)
								// 	this.drup(res.data)
								// }
								// this.$message({
								//     type: 'success',
								//     message: '成功!'
								// });
								this.visible = false
								this.$emit('confirm')
								this.form={}
							})


						} finally {
							this.$loading().close()
							this.form={}
							// this.form.address_detail = ''
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//选择会员类型
			changemember_type(e) {
				console.log(e, 'e')
				this.form.member_type = e
			},
			input(e) {
				console.log(e, 'e')
				this.area = e
				this.form.address_detail = e.map(item => item.name).join('')
				// console.log(e,'inpute',this.form.address_detail)
			},
			drup(url) {
				this.$confirm('请在2小时内完成进件资料填写，逾期链接作废?', '提示', {
					confirmButtonText: '去进帐',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.open(url)
				}).catch(action => {
					if (action === 'cancel') {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					} else {

					}

				});
			},
		}
	}
</script>